<template>
  <div class="grow">
    <van-nav-bar title="造作新家 | 会员体系介绍" left-arrow @click-left="back">
      <van-icon name="cross" slot="right" v-tap="{methods:close}"/>
    </van-nav-bar>
    <h2 class="tit">造作生活家会员体系介绍</h2>
    <van-collapse v-model="activeName" accordion>
      <van-collapse-item name="1">
        <div slot="title" class="item">造作生活家会员有哪些特权</div>

        <ul class="navlist">
          <li class="active">
            <i class="iconfont icon-xunzhang"></i>
            <p>升级礼</p>
          </li>
          <li>
            <i class="iconfont icon-dangao"></i>
            <p>生日礼包</p>
          </li>
          <li>
            <i class="iconfont icon-shafa1"></i>
            <p>会员价</p>
          </li>
          <li>
            <i class="iconfont icon-xiangji1"></i>
            <p>晒单奖励</p>
          </li>
          <li>
            <i class="iconfont icon-lingdang1"></i>
            <p>会员惊喜</p>
          </li>
          <li>
            <i class="iconfont icon-shouhuodizhi"></i>
            <p>线下活动</p>
          </li>
        </ul>

        <div id="upgrade" class="content bingo">
          <h4>
            <i class="iconfont icon-xunzhang"></i>升级礼
          </h4>
          <ul class="grade">
            <li>
              <h4>Z1</h4>
              <div>
                <h5>￥370优惠券</h5>
                <p>全场通用优惠券礼包，优惠低至98折</p>
              </div>
            </li>
            <li>
              <h4>Z2</h4>
              <div>
                <h5>￥1155优惠券</h5>
                <p>全场通用优惠券礼包，优惠低至97折</p>
              </div>
            </li>
            <li>
              <h4>Z3</h4>
              <div>
                <h5>￥3375优惠券</h5>
                <p>全场通用优惠券礼包，优惠低至95折</p>
              </div>
            </li>
            <li>
              <h4>Z4</h4>
              <div>
                <h5>￥4725优惠券</h5>
                <p>全场通用优惠券礼包，优惠低至93折</p>
              </div>
            </li>
            <li>
              <h4>Z5</h4>
              <div>
                <h5>￥6750优惠券</h5>
                <p>全场通用优惠券礼包，优惠低至9折</p>
              </div>
            </li>
          </ul>
          <p>升级后，可领取当前等级的升级礼一份，优惠券在领取后自动充入账户。跳过的等级不补发</p>
        </div>
        <div id="present" class="content">
          <h4>
            <i class="iconfont icon-dangao"></i>生日礼包
          </h4>
          <ul class="grade">
            <li>
              <h4>Z1</h4>
              <div>
                <h5>生日全场95折券</h5>
                <p>全场通用优惠券礼包，优惠低至95折</p>
              </div>
            </li>
            <li>
              <h4>Z2</h4>
              <div>
                <h5>￥40生日礼</h5>
                <p>精选实物生日礼</p>
                <h5>生日全场94折券</h5>
                <p>全场通用优惠券礼包，优惠低至94折</p>
              </div>
            </li>
            <li>
              <h4>Z3</h4>
              <div>
                <h5>￥60生日礼</h5>
                <p>精选实物生日礼</p>
                <h5>生日全场92折券</h5>
                <p>全场通用优惠券礼包，优惠低至92折</p>
              </div>
            </li>
            <li>
              <h4>Z4</h4>
              <div>
                <h5>￥100生日礼</h5>
                <p>精选实物生日礼</p>
                <h5>生日全场9折券</h5>
                <p>全场通用优惠券礼包，优惠低至9折</p>
              </div>
            </li>
            <li>
              <h4>Z5</h4>
              <div>
                <h5>￥200生日礼</h5>
                <p>精选实物生日礼</p>
                <h5>生日全场88折券</h5>
                <p>全场通用优惠券礼包，优惠低至88折</p>
              </div>
            </li>
          </ul>
          <p>完善生日信息后，可在生日当天起7天内领取一份生日礼。优惠券领取后自动充入账户且领取后7天内有效，实物礼将按照领取时填写的地址寄出。生日礼每年只能领取一次。</p>
        </div>

        <div id="member" class="content">
          <h4>
            <i class="iconfont icon-shafa1"></i>会员价
          </h4>
          <p>可享精选商品会员专属优惠，等级越高，优惠力度越大可享精选商品会员专属优惠，等级越高，优惠力度越大</p>
        </div>
        <div class="content">
          <h4>
            <i class="iconfont icon-xiangji1"></i>晒单返券
          </h4>
          <p>
            发布不少于30个字和2张美图的晒单，即可获得对应商品成交价1%的无门槛优惠券，加入精选再得2%的无门槛优惠券
            <br />在小红书、好好住上晒出你的造作好物，带上“造作新家”标签，截图给客服或客户经理，额外获得对应商品成交价各1%的无门槛优惠券
          </p>
        </div>
        <div class="content">
          <h4>
            <i class="iconfont icon-lingdang1"></i>会员惊喜
          </h4>
          <p>
            可参与造作不定期推出的会员惊喜活动
            <br />活动开启时，可从会员中心或首页进入，参加活动
          </p>
        </div>
        <div class="content">
          <h4>
            <i class="iconfont icon-shouhuodizhi"></i>线下活动
          </h4>
          <p>
            Z4、Z5会员享受线下活动优先受邀特权
            <br />举行线下活动时，造作君会优先邀请享有此特权的会员参加
          </p>
        </div>
      </van-collapse-item>
      <van-collapse-item name="2">
        <div slot="title" class="item">如何成为造作生活家会员</div>

        <div class="member">
          <h4>成长值达到150即可自动成为造作生活家会员，你可以通过以下方式快速积累成长值，成为会员：</h4>
          <p>完善手机号、性别、生日等个人资料</p>
          <p>完成150元以上的订单支付</p>
          <p class="text-p">
            获取成长值的详细方式，可至
            <span>“如何获取成长值”</span>处查看
          </p>
        </div>
      </van-collapse-item>
      <van-collapse-item name="3">
        <div slot="title" class="item">如何提升会员等级</div>

        <div class="howup">
          <h4>各等级与成长值的对应表如下：</h4>
          <table class="member-grow-table small center">
            <tbody>
              <tr class="bor">
                <th width="60">等级</th>
                <th>Z1</th>
                <th>Z2</th>
                <th>Z3</th>
                <th>Z4</th>
                <th>Z5</th>
              </tr>
              <tr>
                <td>成长值</td>
                <td>150-999</td>
                <td>1000-2999</td>
                <td>3000-9999</td>
                <td>10000-29999</td>
                <td>30000以上</td>
              </tr>
            </tbody>
          </table>
          <p>成长值达标，即可自动升级</p>
          <p class="text-p">获取成长值的详细方式，可至<span>“如何获取成长值”</span>处查看</p>
        </div>
      </van-collapse-item>
      <van-collapse-item name="4">
        <div slot="title" class="item">如何获取成长值</div>
        <div class="tab">
          <table>
            <tr>
              <td>行为</td>
              <td>成长值奖励</td>
            </tr>
            <tr>
              <td>购物</td>
              <td>自2017年11月4日起，按实际支付金额的100%奖励成长值。优惠券、代金券等不参与成长值奖励。在造作新家App或官网确认收货后，成长值奖励自动充入账户（购买时已奖励过成长值的除外）</td>
            </tr>
            <tr>
              <td>完善个人资料</td>
              <td>设置头像、昵称、性别、生日，绑定手机号、邮箱，每项可获得50成长值，每项只奖励一次</td>
            </tr>
          </table>
          <p class="text-p">退款时，按退款金额相应扣除购买奖励的成长值。<br>如果成长值降到当前等级成长值标准以下，会员等级也会相应降低。降级后，之前等级下尚未领取的权益将不能再领取，但再次升级到此等级后，之前未领的权益可重新领取。</p>
        </div>
      </van-collapse-item>
      <van-collapse-item name="5">
        <div slot="title" class="item">我的成长值明细</div>
        <h4 style="color:#333">当前成长值50</h4>
        <div class="tab ttab">
          <table>
            <tr>
              <td>行为</td>
              <td>成长值</td>
              <td>时间</td>
            </tr>
            <tr>
              <td>完善个人信息</td>
              <td>50</td>
              <td>2019-10-28</td>
            </tr>
          </table>
        </div>
      </van-collapse-item>
    </van-collapse>
  </div>
</template>

<script>
export default {
  name: "grow",
  data() {
    return {
      activeName: "1",
      active: 0
    };
  },
  methods:{
     back() {
      this.$router.go(-1);
    },
    close(){
      this.$router.push("/my");
    }
  },
  mounted() {
    console.log();
    var num = document.getElementsByClassName("navlist")[0].children.length;
    for (let i = 0; i < num; i++) {
      document.getElementsByClassName("navlist")[0].children[
        i
      ].onclick = function() {
        for (let i = 0; i < num; i++) {
          document
            .getElementsByClassName("navlist")[0]
            .children[i].setAttribute("class", "");
          document
            .getElementsByClassName("content")
            [i].setAttribute("class", "content");
        }
        this.setAttribute("class", "active");
        document
          .getElementsByClassName("content")
          [i].setAttribute("class", "content bingo");
      };
    }
  }
};
</script>

<style scoped>
.van-ellipsis{
    font-size:30px;
}
.van-icon {
  color: #333;
  font-size:30px;
}
.tit {
  margin-left: 25px;
  font-size: 42px;
}
.grow {
  margin: 0 35px 40px ;
}
.item {
  font-weight: bold;
  font-size: 30px;
  padding: 10px 0;
}
.van-tabs {
  height: 300px;
}
/deep/ .van-tabs__wrap {
  height: 200px;
}
.special {
  width: 300px;
  height: 300px;
  /* background: salmon; */
}
.navlist {
  background: #f6f6f6;
  overflow: hidden;
  border-radius: 5px;
}
.navlist li {
  float: left;
  width: 120px;
  height: 140px;
  text-align: center;
  padding: 0 16px;
  padding-top: 25px;
}
.navlist li i {
  color: rgb(229, 106, 105);
  font-size: 40px;
}
.navlist li p {
  color: #333;
  margin-top: 20px;
}

.navlist .active {
  background: #d2d2d2;
}
.content {
  display: none;
}
.bingo {
  display: block;
}
.content > h4 {
  margin: 40px 0 20px;
  padding-left: 5px;
  font-size: 32px;
  font-weight: 500;
  color: #333;
}
.content > h4 i {
  color: rgb(229, 106, 105);
  font-size: 30px;
}
.grade li {
  padding: 30px 0;
  border-bottom: 1px solid #d2d2d2;
}
.grade h4 {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  vertical-align: text-bottom;
  color: #313131;
}
.grade div {
  margin-left: 50px;
  line-height: 1;
  color: #333;
  letter-spacing: 0.5px;
  font-size: 22px;
}

.grade div h5 {
  margin: 0;
  font-size: 26px;
  font-weight: 500;
  margin: 10px 0;
}
.grade div p {
  margin: 0;
  font-size: 24px;
  color: #999;
  margin: 10px 0 20px 0;
}
#member p {
  font-size: 25px;
}

.member h4 {
  width: 100%;
  font-size: 100%;
  line-height: 1.5;
  color: #333;
  font-weight: 600;
  margin: 0;
}
.member p {
  position: relative;
  padding-left: 20px;
  color: #666;
}
p span {
  color: rgb(229, 106, 105);
}
.howup h4{
  color: #333;
}
.member p::before {
  position: absolute;
  top: 50%;
  left: 0;
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  background: #a0a0a0;
  border-radius: 50%;
}
.member-grow-table td, .member-grow-table th {
    height: 1px;
    line-height: 30px;
    padding: 20px 15px;
    font-weight: 400;
    border-right: #d2d2d2 1px solid;
    vertical-align: middle;
    color: #333;
}
.bor th{
  border-bottom: solid 1px #d2d2d2 !important;
}
.member-grow-table td:last-child, .member-grow-table th:last-child {
    border-right: 0;
}
.member-grow-table td:first-child, .member-grow-table th:first-child {
    font-weight: 700;
    color: #333;
}
.tab table{
  background: #f6f6f6;
}
.tab table tr td:first-child{
  width: 70px;
}
.tab table tr td{
  border-bottom:solid 1px #d2d2d2;
  border-left:solid 1px #d2d2d2;
  padding: 20px;
  color: #333;
}
.tab table tr:first-child td{
  font-weight:600;
}

.tab table tr:last-child td{
  border-bottom: 0;
}
.tab table tr td:first-child{
  border-left: 0;
}
.ttab table{
  width: 100%;
}
.tab table tr td:first-child{
  width: 240px;
}
</style>